import { Space, Table, Input, Popconfirm, Button, Select, Modal, Pagination, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState, } from 'react';
import  './page.less';
import { Link, history, connect } from 'umi';
import Echarts from "../../components/echarts"
const { Option } = Select
const Pagework = (props: any) => {
  const { dispatch, pagList } = props
  const [name, setname] = useState('')
  const [path, setpath] = useState('')
  const [status, setStatus] = useState('publish')
  const [arr, setarr]: any = useState([])
  let [sums, setsums] = useState(0)


  
  useEffect(() => {
    dispatch({ type: 'pagList/getList' })
    setsums(pagList.allLIst.length)
  }, [])
  //发布下线
  let bnt = (item: any) => {
    if (item.status == "draft") {
      var status = "publish"
    } else {
      var status = "draft"
    }
    dispatch({ type: 'pagList/updataData', payload: { id: item.id, status } })
  }

  //弹框那一块
  //---------------
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //-----------------------
  //编辑
  const editArticles = (record: any) => {
    history.push({ pathname: '/newweb', query: record })
  }
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
    id: number
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'emil',
    },
    {
      title: '顺序',
      dataIndex: 'order',
      key: 'order',
    },
    {
      title: '阅读量',
      dataIndex: 'views',
      key: 'views',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        return <td>{text === 'publish' ? "已发布" : "下线"}</td>
      }
    },
    {
      title: '发布时间',
      dataIndex: 'publishAt',
      key: 'publishAt',
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          {/*编辑按钮 */}
          <div className="operation" ><a onClick={() => editArticles(record)}>编辑</a><span>|
            {/* 根据status判断出现发布或下线 */}
          </span><a onClick={() => { bnt(record) }}>{(record as any).status == "publish" ? "下线" : "发布"}</a><span>|
            {/* 查看访问 点击出现统计图 */}
            </span><a onClick={showModal}>查看访问</a><span>|
              {/* 删除按钮 */}
            </span> <Popconfirm
              title="确认要删除这个文章?"
              //确认删除
              onConfirm={() => { dispatch({ type: 'pagList/delListData', payload: { id: record.id } }) }}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">删除</a>
            </Popconfirm></div>
        </Space>
      ),
    },
  ];
  const data: any = pagList.allLIst


//重置
  let reset = () => {
    setname('')
    setpath('')
    dispatch({ type: 'pagList/getList' })
  }

  //获取每一条数据的发布还是下线
  const handleChange = (value: string) => {
    // console.log(`selected ${value}`);
    if (value === "已发布") {
      setStatus("publish")
    } else {
      setStatus("draft")
    }
  };

  // 选中的发布
  let fabu = () => {
    arr.forEach((item: any, index: number) => {
      dispatch({ type: 'pagList/updataData', payload: { id: item.id, status: "publish" } })
    })
  }
  // 选中的下线
  let xiaxina = () => {
    arr.forEach((item: any, index: number) => {
      dispatch({ type: 'pagList/updataData', payload: { id: item.id, status: "draft" } })
    })
  }
  //选中的删除
  let del = () => {
    arr.forEach((item: any, index: number) => {
      dispatch({ type: 'pagList/delListData', payload: { id: item.id } })
    })
  }

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      setarr(selectedRows)
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };


  return (
    <div className='box'>
      <div className="content">
        <div className="rom">
           名称:<Input placeholder="请输入页面名称" value={name} onChange={(e) => { setname(e.target.value) }} />
           路径:<Input placeholder="请输入页面路径" value={path} onChange={(e) => { setpath(e.target.value) }} />
          状态:<Select onChange={handleChange} style={{ width: 180 }}>
            <Option value="已发布">已发布</Option>
            <Option value="草稿">草稿</Option>
          </Select>
        </div>
        <div className="btns">
          <Button className="search" onClick={() => {
            dispatch({
              type: 'pagList/ssList', payload: {
                  page: 1,
                  pageSize: 12,
                   name,
                   path,
                  status
              }
            })
          }}>搜索</Button>
          <Button className="chong" onClick={() => { reset() }}>重置</Button>
        </div>
      </div>
      <div className="table">
        <div className="All_item">
          <span className={arr.length > 0 ?"span" : "spans"}>

            <button onClick={() => { fabu() }}>发布</button>
            <button onClick={() => { xiaxina() }}>下线</button>
            {/* 删除按钮 */}
            <button className="del" ><Popconfirm
              title="确认要删除这个文章?"
              onConfirm={() => { del() }}

              okText="Yes"
              cancelText="No"
            >
              删除
            </Popconfirm></button>
          </span>
          <span className="you">
            <button className="b1"><Link to={'/newweb'} style={{ color: "#fff" }}>+新建</Link> </button>
            <button className="b2" onClick={() => { reset() }}>
              <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1528" width="16" height="16"><path d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z" p-id="1529"></path></svg>
            </button>
          </span>
        </div>
          <Table  rowSelection={rowSelection} columns={columns} dataSource={data}></Table>
      </div>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Echarts />
      </Modal>
    </div>
  )
}

export default connect(({ pagList }: any) => ({ pagList }))(Pagework)